<template>
  <li>
    <header>组件的注册</header>
    <ul>
      <li>
        组件名
        <ol>
          <li>组件名的大小写</li>
        </ol>
        <my-component-name/>
        <kebab-case/>
        <pascal-case/>
      </li>
      <li>
        全局注册
        <component-a/>
        <component-b/>
        <component-c/>
      </li>
      <li>
        局部注册
        <!-- 注意局部注册的组件在其子组件中不可用。 -->
        <!-- 例如，如果你希望 ComponentA 在 ComponentD 中可用，则你需要在 ComponentD 中引入 ComponentA -->
        <component-d/>
      </li>
      <li>
        模块系统
        <ol>
          <li>在模块系统中局部注册</li>
          <li>基础组件的自动化全局注册</li>
        </ol>
        <component-e/>
        <!-- 全局注册的组件 -->
        <base-button/>
        <base-icon/>
      </li>
    </ul>
  </li>
</template>

<script>
import MyComponentName from "./samples/MyComponentName";
import KebabCase from "./samples/kebab-case";
import PascalCase from "./samples/PascalCase";
import ComponentA from "./samples/ComponentA";
import ComponentB from "./samples/ComponentB";
import ComponentC from "./samples/ComponentC";
import ComponentD from "./samples/ComponentD";
import ComponentE from "./samples/ComponentE";

export default {
  name: "Register",
  components: {
    MyComponentName,
    KebabCase,
    PascalCase,
    ComponentA,
    ComponentB,
    ComponentC,
    ComponentD,
    ComponentE
  }
};
</script>